<style>
  .pb-standalone img {width: 23%;margin: 1%;float: left;}
  .list-block .item-input {margin: 0;}
  .item-input-amount {display: flex;}
  .item-input-amount .amount {text-align: center}
  .plus,.minus {
    width: 70px;
    line-height: 40px;
    text-align: center;
    background: #e7e7e7;
    border-radius: 2px;
    font-size:1rem;
  }
</style>

<div class="page">
  <header class="bar bar-nav">
    <h1 class="title">商品详情</h1>
  </header>

  <div class="content">
      <!--<p style="margin:.5em 0;">A2 Platinum Infant Formula Stage 1</p>-->
      <!--<p style="margin:.5em 0;">白金系列1段婴儿配方奶粉</p>-->
      <div class="list-block" style="font-size: .8rem;">
        <ul>
          <!-- Text inputs -->
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title label">英文名</div>
                <div class="item-input">
                  <div>A2 Platinum Infant Stage 1</div>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title label">中文名</div>
                <div class="item-input">
                  <div>白金系列1段婴儿配方奶粉</div>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title label">规格</div>
                <div class="item-input">
                  <div>900G</div>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title label">类型</div>
                <div class="item-input">
                  <div>婴儿奶粉</div>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title label">条码</div>
                <div class="item-input">
                  <div>9421902960031</div>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title label">图片</div>
                <div class="item-input">
                  <div class="pb-standalone">
                    <img src="//img.alicdn.com/tps/i3/TB1kt4wHVXXXXb_XVXX0HY8HXXX-1024-1024.jpeg" >
                    <img src="//img.alicdn.com/tps/i1/TB1SKhUHVXXXXb7XXXX0HY8HXXX-1024-1024.jpeg" >
                    <img src="//img.alicdn.com/tps/i4/TB1AdxNHVXXXXasXpXX0HY8HXXX-1024-1024.jpeg" >

                  </div>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title label">零售价</div>
                <div class="item-input">
                  <div>666元</div>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title label">数量</div>
                <div class="item-input item-input-amount">
                    <i class="minus" style="color: #bbb;line-height: 26px;">_</i>
                    <input class="amount" type="number" pattern="[0-9]*" value="1" style="padding: 0;"/>
                    <i class="plus">+</i>
                </div>
              </div>
            </div>
          </li>


        </ul>
      </div>
    <div class="content-block" style="padding: 0 .5rem;margin-bottom: 2rem;">
        <a href="#" class="button button-big button-fill button-warning into-cart">加入购物车</a>
    </div>
  </div>

</div>
<script>
  $(function(){
      var url = window.location.href;
//      $.get(url,function(res){
//        console.log(res);
//      });

    /*=== 默认为 standalone ===*/
    var myPhotoBrowserStandalone = $.photoBrowser({
      photos : [
        '//img.alicdn.com/tps/i3/TB1kt4wHVXXXXb_XVXX0HY8HXXX-1024-1024.jpeg',
        '//img.alicdn.com/tps/i1/TB1SKhUHVXXXXb7XXXX0HY8HXXX-1024-1024.jpeg',
        '//img.alicdn.com/tps/i4/TB1AdxNHVXXXXasXpXX0HY8HXXX-1024-1024.jpeg',
      ]
    });
    //点击时打开图片浏览器
    $(document).on('click','.pb-standalone',function () {
      myPhotoBrowserStandalone.open();
    });

    //输入数量
    $('.amount').change(function(){
        $(this).val(function(){
            return $(this).val() == 0 ? 1 : Number($(this).val());
        });
        $(this).val() == 1 ? $('.minus').css('color','#bbb') : $('.minus').css('color','#5f646e');

    });

    //    加减数字
    function count($this,isPlus){
      var $thisVal = $this.siblings('input');
      var amount = Number($thisVal.val());
      if(!isPlus && amount == 1) return;
      if(Number.isInteger(amount) && amount >= 1){
        $thisVal.val(function(){
          return isPlus ? Number($thisVal.val()) + 1 : Number($thisVal.val()) - 1;
        });
        $thisVal.val() == 1 ? $('.minus').css('color','#bbb') : $('.minus').css('color','#5f646e');

      }else{
        $.toast("商品数量错误");
        $thisVal.val("1");
      }
    }
    $(document).on('click','.plus',function(){
      count($(this),true);
    });
    $(document).on('click','.minus',function(){
      count($(this));
    });

    //    加入购物车
    $(document).on('click','.into-cart',function(){
      var amount = Number($('.amount').val());
      var pid = $(this).data('pid');
      console.log(pid);

      if(Number.isInteger(amount) && amount >= 1){
        $.post('/user/addToCart',{productId: pid, amount: amount},function(res, status){
          console.log(status);
          console.log(res);
          if (res.status == 'success'){
            $.toast("加入购物车成功");
          }
        });
      }else{
        $.toast("商品数量错误");
        $thisVal.val("1");
      }
    });

  })
</script>

